<template>
    <div class="wrap">
        <div class="singleTitle f-16 c-gray">前七日下单金额概况</div>
        <div id="chartWrap1" style="width:100%;height:400px"></div>
        <div class="reportItem">
            <div class="head c-white f-18">今日资金</div>
            <div class="body">
                <div class="detailItem">
                    <span class="w-100 text-r">账户余额:</span>
                    <span class="p-l-10 c-orange">{{obj.account.balance | thousands(2)}}元</span>
                </div>
                <div class="detailItem">
                    <span class="w-100 text-r">冻结金额:</span>
                    <span class="p-l-10 c-gray">{{obj.account.frozen | thousands(2)}}元</span>
                </div>
                <div class="division"></div>
                <div class="detailItem">
                    <span class="w-100 text-r">充值金额:</span>
                    <span class="p-l-10 c-gray">{{obj.account.recharge | thousands(2)}}元</span>
                </div>
                <div class="detailItem">
                    <span class="w-100 text-r">实际支出:</span>
                    <span class="p-l-10 c-gray">{{obj.account.pay | thousands(2)}}元</span>
                </div>
            </div>
        </div>
        <div class="reportItem">
            <div class="head c-white f-18">本月资金统计（截止昨日）</div>
            <div class="body">
                <div class="detailItem">
                    <span class="w-100 text-r">充值金额:</span>
                    <span class="p-l-10 c-orange">{{obj.amtMonth.rechargeAmt | thousands(2)}}元</span>
                </div>
                <div class="detailItem">
                    <span class="w-100 text-r">实际支出:</span>
                    <span class="p-l-10 c-gray">{{obj.amtMonth.pay | thousands(2)}}元</span>
                </div>
                <div class="division"></div>
                <div class="detailItem">
                    <span class="w-100 text-r">实付运费:</span>
                    <span class="p-l-10 c-gray">{{obj.amtMonth.freight | thousands(2)}}元</span>
                </div>
                <div class="detailItem">
                    <span class="w-100 text-r">调度费:</span>
                    <span class="p-l-10 c-gray">{{obj.amtMonth.dispatch | thousands(2)}}元</span>
                </div>
                <div class="detailItem">
                    <span class="w-100 text-r">服务费:</span>
                    <span class="p-l-10 c-gray">{{obj.amtMonth.charge | thousands(2)}}元</span>
                </div>
            </div>
        </div>
        <div class="reportItem">
            <div class="head c-white f-18">发车统计</div>
            <div class="body">
                <div class="detailItem">
                    <span class="w-120 text-r">在途运单:</span>
                    <span class="p-l-10 c-orange">{{obj.sendCar.count}}</span>
                </div>
                <div class="detailItem">
                    <span class="w-120 text-r">在途运单金额:</span>
                    <span class="p-l-10 c-gray">{{obj.sendCar.amount | thousands(2)}}元</span>
                </div>
                <div class="detailItem">
                    <span class="w-120 text-r">今日发车:</span>
                    <span class="p-l-10 c-gray">{{obj.sendCar.todayCount}}</span>
                </div>
                <div class="detailItem">
                    <span class="w-120 text-r">今日下单金额:</span>
                    <span class="p-l-10 c-gray">{{obj.sendCar.todayAmount | thousands(2)}}元</span>
                </div>
            </div>
        </div>
        <div class="reportItem">
            <div class="head c-white f-18">本月发车统计（截止昨日）</div>
            <div class="body">
                <div id="chartWrap2" style="width:100%;height:400px"></div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'

import { Group, Cell, Loading, XButton, XDialog, Actionsheet, Divider } from 'vux'
import { WechatPlugin, ToastPlugin } from 'vux'
import { AlertPlugin, ConfirmPlugin } from 'vux'

import axios from '@/api/axios'
import api from '@/api/base.api'
import { Grid, GridItem } from 'vux'

var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
Vue.prototype.$echarts = echarts
export default {
    name: "overView",
    components: {
        Grid,
        GridItem
    },
    data() {
        return {
            obj: {
                account: {},
                amtMonth: {},
                sendCar: {},
                showSendCar: false
            }
        }
    },
    mounted() {
        this.fetchDraw();
    },
    methods: {
        fetchDraw() {
            /* 数据复制+初始化图标 */
            var times = ['08/01', '08/02', '08/03', '08/04', '08/05', '08/06', '08/07'];
            var moneys = [11, 11, 15, 13, 12, 13, 10];
            var routes = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"];
            var counts = [5, 20, 36, 10, 10, 20];




            var dataArr = [];
            var itemArr = [];
            routes.forEach(function(item, key) {
                var obj = {
                    name: `(${counts[key]})${item}`,
                    value: counts[key]
                };
                dataArr.push(obj);
            })
            dataArr.sort(function(a, b) {
                return b.value - a.value;
            })
            dataArr.forEach(function(item) {
                itemArr.push(item.name);
            })
            console.table(dataArr);
            this.draw1(times, moneys);
            this.draw2(itemArr, dataArr);

        },
        draw1(times, moneys) {
            var _this = this;
            var myChart = this.$echarts.init(document.getElementById('chartWrap1'));
            //myChart.showLoading();
            //myChart.hideLoading();
            // 绘制图表
            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '4%',
                    right: '5%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: times
                },
                yAxis: {
                    type: 'value',
                    name:"单位（万元）",
                    axisLabel: {
                        formatter: '{value}'
                    }
                },

                series: [
                    {
                        name: '下单金额',
                        type: 'line',
                        smooth: true,
                        data: moneys,//[11, 11, 15, 13, 12, 13, 10],
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                    }
                ]
            });
        },
        draw2(a, b) {
            var myChart = this.$echarts.init(document.getElementById('chartWrap2'));
            // 绘制图表
            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}'
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: a,
                },
                series: [{
                    name: '发车数量',
                    type: 'pie',
                    center: ['50%', '60%'],
                    radius: ['0%', '60%'],
                    data: b,
                    label: {
                        normal: {
                            show: false,
                            position: 'outer',
                        }
                    }
                }]
            });
        }
    }
}
</script>

<style lang="less">
@import '../../assets/css/report.less';
</style>
